<template>
  <div>
    <el-form ref="ruleForm" :rules="rules" :model="ruleForm">
      <div class="l-addrygl">
        <!-- <h2>基本信息</h2> -->
        <!-- 返回 -->
        <div class="l-addrygl-1">
          <div></div>
          <div class="l-addrygl-back" @click="back()">返回</div>
          <div class="head-span">编辑设备</div>
        </div>
        <!-- 单位信息 -->

        <div class="l-addrygl-2">
          <div class="l-addrygl-2-1">环境监测信息</div>

          <!-- input框 -->
          <div class="l-addrygl-2-2">
            <!-- 第一行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="设备名称：" prop="equipment_name">
                  <el-input
                    v-model="ruleForm.equipment_name"
                    prop="uleForm.equipment_name"
                    class="padding"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备编号：" prop="equipment_code">
                  <el-input v-model="ruleForm.equipment_code" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <div>设备类型：</div>
                  <el-select
                    v-model="ruleForm.equipment_type_id"
                    placeholder="请选择"
                     :disabled="true"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="ip地址：" prop="equipment_ip">
                  <el-input v-model="ruleForm.equipment_ip" class="padding"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="品牌名称：" prop="equipment_brand">
                  <el-input v-model="ruleForm.equipment_brand" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="安装时间：" prop="equipment_install">
                  <el-date-picker
                    v-model="ruleForm.equipment_install"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="安装位置：" prop="equipment_addr">
                  <el-input v-model="ruleForm.equipment_addr" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="equipment_status">
                  <div>设备状态：</div>
                  <el-select
                    v-model="ruleForm.equipment_status"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in linput1"
                      :key="item.index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="开机时间：" prop="equipment_start">
                  <el-date-picker
                    v-model="ruleForm.equipment_start"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="项目平面图位置：" prop="equipment_xy">
                  <el-input v-model="ruleForm.equipment_xy" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="操作人员：" prop="people_id">
                  <el-input v-model="ruleForm.people_id" class="padding"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="l-addrygl-1">
          <div class="l-tijiao">
            <el-form-item>
              <el-button
                class="btn-1"
                type="primary"
                @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button class="btn-2" @click="resetForm('ruleForm')"
                >重置</el-button
              >
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import http from "../api";
// import axios from "axios";
export default {
  data() {
    return {
      linput2: [], //职务
      linput1: [
        {
          value: 0,
          label: "开机",
        },
        {
          value: 1,
          label: "关闭",
        },
      ], //单位名称

      options1: [
        {
          value: 1,
          label: "门禁设备",
        },
        {
          value: 2,
          label: "塔吊设备",
        },
        {
          value: 3,
          label: "监控设备",
        },
        {
          value: 4,
          label: "电表设备",
        },
        {
          value: 5,
          label: "环境监测设备",
        },
        {
          value: 6,
          label: "车辆监测设备",
        },
        {
          value: 7,
          label: "基坑监测设备",
        },
      ],

      currentRow: null,

      ruleForm: this.$route.params,

      // 表单验证规则
      rules: {
        equipment_name: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        equipment_code: [
          { required: true, message: "请输入设备编号", trigger: "blur" },
        ],
        equipment_ip: [
          { required: true, message: "请输入ip地址", trigger: "blur" },
        ],
        equipment_type_id: [
          { required: true, message: "请输入设备类型", trigger: "blur" },
        ],
        equipment_brand: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
        ],
        equipment_install: [
          { required: true, message: "请选择安装时间", trigger: "change" },
        ],
        equipment_addr: [
          { required: true, message: "请输入安装位置", trigger: "blur" },
        ],
        equipment_status: [
          { required: true, message: "请选择设备状态", trigger: "change" },
        ],
        equipment_start: [
          { required: true, message: "请选择开机时间", trigger: "change" },
        ],
        equipment_xy: [
          {
            required: true,
            message: "请输入项目平面图位置",
            trigger: "change",
          },
        ],
       
      },
    };
  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        name: "环境监测",
      });
    },
    // 提交
    submitForm(ruleForm) {
      console.log(this.ruleForm);
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          http.compile(this.ruleForm).then((res) => {
            console.log("编辑", res);
          });
          alert("成功");

          this.$router.push({
            name: "电力监测设备",
          });
        } else {
          return false;
        }
      });
    },
    //重置按钮
    resetForm(formName) {
      this[formName] = {};
      this.$refs[formName].resetFields();
    },
  },
  mounted() {},
};
</script>
<style scoped>
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px !important;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}

/* .el-input >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
}
.el-select >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
} */

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 239px;
}
.el-col {
  height: 90px;
}

.input-span {
  margin-right: 5px;
}
.add-input {
  width: 300px;
  margin-top: 15px;
  display: inline-block;
  margin-left: 10px;
}
.l-addrygl {
  margin-top: 20px;
  margin-left: 20px;
  /* width: 1200px; */
  height: 640px;
  background: #f1f1f1;
  overflow-y: scroll;
}
.l-addrygl-1 {
  /* position: fixed;
  top: 0; */
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
  display: flex;
  /* position: relative;  */
  justify-content: left;
  align-items: center;
}
.l-addrygl-back {
  cursor: pointer;
  margin-left: 10px;
}
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}
.l-addrygl-2 {
  width: 100%;
  height: 320px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.l-addrygl-2-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-3-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-3-2 {
  margin-left: 70px;
}
.l-addrygl-4-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
.l-addrygl-4-1-right {
  color: blue;
  margin-right: 20px;
  cursor: pointer;
}
.dang {
  height: 40px;
  margin-top: 40px;
  /* margin-top: 40px; */
}

.l-addrygl-3 {
  width: 100%;
  height: 282px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}
.l-addrygl-4 {
  width: 100%;
  height: 202px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}
.l-tijiao {
  width: 195px;
  height: 40px;
  position: absolute;
  right: 90px;
  top: 435px;
}
/* 提交重置按钮 */
.btn-1 {
  width: 80px;
  height: 30px;
  line-height: 6px;
}
.btn-2 {
  width: 80px;
  height: 30px;
  line-height: 6px;
}
</style>